<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex flex-wrap justify-start  " style="align-items: center;">
			<view class="flex2  flex-sub   flex flex-wrap justify-start  " style="flex-direction: column;">
				<text class="text3 text-bold "> 活动记录</text>
			</view>
		</view>
		<view class="flex4   response  flex flex-wrap justify-center  ">
			<view class="flex5   response  flex flex-wrap justify-between  " v-for="(item,index) in log_list"
				style="flex-direction: row;align-items: center;">
				<image class="picture6 radius  radius" style="width:322rpx;height:228rpx;min-height:unset;"
					:src="item.activity_id[0].cover.url"></image>
				<view class="flex7  flex-sub   flex flex-wrap justify-start  "
					style="flex-direction: column;align-content: space-between;">
					<text class="text8 response "> {{item.activity_id[0].title}}</text>
					<text class="text8 response "> {{btn_status(item.activity_id[0])}}</text>
					<view class="flex9   response  flex flex-wrap justify-between  " style="align-items: center;">
						<text class="text-gray "> </text>
					</view>
					<view class="flex11   response  flex flex-wrap justify-center  "
						style="flex-direction: row-reverse;align-items: center;">
						<text class="text12 text-grey text-sm ">
							时间:{{timestampToDateString(item.activity_id[0].start_date)}}到{{timestampToDateString(item.activity_id[0].end_date)}}</text>
					</view>
					<view class="feed_back" style="display: flex;flex-direction: row;justify-content: space-around;">

						<view class="btn" @click="btn_feedback(item)">
							<view class="btn_text">
								活动心得
							</view>
						</view>
						<view class="cancel" v-show="item.show_btn" @click="btn_cancel(item)">
							<view class="cancel">
								取消报名
							</view>
						</view>

					</view>
				</view>

			</view>

		</view>

		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'
	const db = uniCloud.database()
	let abu_db = db.collection('abu-activity-signup,abu-activity-info');
	export default {
		data() {
			return {
				user_info: {},
				log_list: []
			};
		},
		mounted() {

		},
		async onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			await this.load_data()
			uni.hideLoading()

		},
		methods: {
			async btn_cancel(item) {
				try {
					const {
						confirm,
						cancel
					} = await new Promise((resolve, reject) => {
						uni.showModal({
							title: '提示',
							content: '取消报名',
							showCancel: true,
							cancelText: '不取消',
							confirmText: '确定取消',
							success: resolve,
							fail: reject
						});
					});

					if (cancel) return;

					if (confirm) {
						uni.showLoading({
							title: '取消中',
							mask: false
						});

						await db.collection('abu-activity-signup').where({
							_id: item._id
						}).remove();

						uni.showToast({
							title: '操作成功',
							icon: 'none'
						});
						uni.reLaunch({
							url: './activity_log'
						})
					}
				} catch (error) {
					console.error('取消报名操作失败', error);
					uni.showToast({
						title: '操作失败，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			async load_data() {
				try {
					// Load the current user info
					await this.load_cunrrent_user_info();

					console.log({
						user_id: this.user_info.uid
					});

					// Fetch data from the database
					const data = await abu_db.where({
						user_id: this.user_info.uid
					}).get();

					console.log(data.result.data);

					// Process the fetched data
					this.log_list = data.result.data.map(item => {
						let end_date = new Date(item.activity_id[0].end_date);
						let current_date = new Date();
						let show = end_date >= current_date;

						return {
							...item,
							show_btn: show
						};
					});
				} catch (error) {
					console.error('Error loading data:', error);
				}
			},
			btn_feedback(item) {
				uni.navigateTo({
					url: '/uni_modules/abu-activity-signup/pages/abu-activity-signup/edit?id=' + item._id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},
			isInDateRange(range) {
				const timestamp = Date.now(); // 获取当前时间戳（毫秒）
				return timestamp >= range.start_date && timestamp <= range.end_date;
			},
			btn_status(item) {
				if (item.status == 0) {
					uni.showToast({
						title: '活动未发布',
						icon: 'none'
					});
					return "无法报名"
				}
				if (item.status == 1) {
					const isInValidDate = this.isInDateRange(item);
					if (isInValidDate) {
						return "已报名"
					} else {
						return "已截止"
					}

				}
				if (item.status == 2) {
					return "报名已经结束了"
				}
			},
			async load_cunrrent_user_info() {
				this.user_info = await uniCloud.getCurrentUserInfo()
			},
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				// 将其格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				return dateString;
			}
			/**
			 *          $vuetag = "";
			 *          $vuecss = "";
			 *          $vuejs = "";
			 *
			 */

			//获取数据

		}
	}
</script>

<style lang="less">
	/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex2 {
		width: 69%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text3 {
		font-size: 36rpx;
	}

	.flex4 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex5 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture6 {
		width: 100%;
		height: 228rpx;
	}

	.flex7 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text8 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex9 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex11 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text12 {
		font-weight: 100;
	}

	.flex13 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture14 {
		width: 100%;
		height: 228rpx;
	}

	.flex15 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text16 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex17 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex19 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text20 {
		font-weight: 100;
	}
</style>